<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24" :offset="0">
        <el-card shadow="always">
          <div class="chart" id="line">图表</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-card shadow="always">
          <div class="chart" id="bar">图表</div>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card shadow="always">
          <div class="chart" id="pie">图表</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import bar from "./options/bar";
import line from "./options/line";
import pie from "./options/pie";
import { pieGet } from "@/api/job";
export default {
  mounted() {
    //柱状图
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("bar"));
    myChart.setOption(bar);

    //线状图
    var lineChart = echarts.init(document.getElementById("line"));
    lineChart.setOption(line);

    //饼状图
    var pieChart = echarts.init(document.getElementById("pie"));
    pieGet().then((res) => {
      // console.log(res);
      pie.series[0].data = res.data.results[0].pieVal;
      pieChart.setOption(pie);
    });

    // 一个图表，通过菜单进行动态切换
  },
};
</script>

<style lang="scss" scoped>
.chart {
  height: 300px;
  /* border: 1px solid red; */
}
</style>
